<template>
	<Layout class="p-5 bg-white">

		<Form :label-width="100">
			<row>
				<Col span="8">
				
				<FormItem class="w-100" label="车龄">
					<Input v-model="car.carCondition" placeholder="请输入车龄" />
					<!-- <Tree 
                            :data="allPermissions" show-checkbox multiple></Tree> -->
				</FormItem>
				<FormItem class="w-100" label="表显里程">
					<Input v-model="car.mileage" placeholder="请输入整数公里数" />
				</FormItem>
				
				<FormItem class="w-100" label="车牌归属地">
					<Input v-model="car.ownerShip" placeholder="请输入车牌归属地" />
				</FormItem>
				<FormItem class="w-100" label="联系人">
					<Input v-model="car.personName" placeholder="请输入联系人" >
						
				    </Input>
				</FormItem>
				<FormItem class="w-100" label="联系电话">
					<Input v-model="car.tel" placeholder="请输入联系电话" >
						
				    </Input>
				</FormItem>
				<FormItem class="w-100" label="联系微信">
					<Input v-model="car.wxNumber" placeholder="请输入联系微信" >
						
				    </Input>
				</FormItem>
				
				</Col>

				<Col span="8">
					<FormItem class="w-100" label="型号">
						<Input v-model="car.type" placeholder="请输入车牌归属地" />
					</FormItem>

				<FormItem class="w-100" label="品牌">
					<Select v-model="car.brandId" style="width:160px">
						<Option v-for="item in brand" :value="item.brandId">{{ item.brandName }}</Option>
					</Select>
				</FormItem>
				<FormItem class="w-100" label="图片上传">
					<div v-if="car.imgUrl != ''">
					  <img
					    :src="car.imgUrl"
					    style="width:180px;height:120px"
					  />
					  <div class="demo-upload-list-cover">
					    <Icon
					      type="ios-trash-outline"
					      @click.native="handleRemove"
					    ></Icon>
					  </div>
					</div>
					<Upload
					  with-credentials
					  :max-size="2048"
					  :show-upload-list="false"
					  name="file"
					  ref="upload"
					  :format="['jpg', 'jpeg', 'png']"
					  :data="{ module: 'car', date: new Date() }"
					  :on-format-error="handleFormatError"
					  :on-exceeded-size="handleMaxSize"
					  :on-success="handleSuccess"
					  :action="url"
					>
					  <Button icon="ios-cloud-upload-outline" style="margin-top: 5px"
					    >Upload files</Button
					  >
					</Upload>
				</FormItem> 
				<!-- <FormItem class="w-100" label="出厂日期">
					<el-date-picker v-model="car.productionDate" type="datetime" format="yyyy-MM-dd HH:mm:ss"
						value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期时间">
					</el-date-picker>
				</FormItem> -->
				<!-- <FormItem class="w-100" label="创建日期">
				<el-date-picker
				     v-model="car.ct"
				     type="datetime"
					 format="yyyy-MM-dd HH:mm:ss"
					 value-format="yyyy-MM-dd HH:mm:ss"
				     placeholder="选择日期时间">
				   </el-date-picker>	
								
			</FormItem> -->
				
				<FormItem class="text-right">
					<Button @click="submit" type="primary">提交</Button>
					<Button @click="cancel" class="ml-2">取消</Button>
				</FormItem>
				</Col>
			</row>
		</Form>


	</Layout>
</template>

<script>
	export default {
		data: function() {
			return {
				url:'',
				iport:'',
				imgUrlList:[],
				car: {
					
					carCondition: null,
					mileage: null,
					ownerShip: "",
					brandId: null,
					type: "",
					standard: "",
					imgUrl: "",
					country: "",
					personName:'',
					tel:'',
					wxNumber:'',
				},
				brand: [],
				paifangList: [{
						value: '国四',
						label: '国四'
					},
					{
						value: '国五',
						label: '国五'
					},
					{
						value: '国六',
						label: '国六'
					},
					{
						value: '国六B',
						label: '国六B'
					}

				],
				biansuList: [{
						value: '手动',
						label: '手动'
					},
					{
						value: '自动',
						label: '自动'
					}
				],				
				styleList: [{
						value: '三厢车',
						label: '三厢车'
					},
					{
						value: '两厢车',
						label: '两厢车'
					},
					{
						value: 'SUV',
						label: 'SUV'
					},
					{
						value: '掀背车',
						label: '掀背车'
					},
					{
						value: '跑车',
						label: '跑车'
					},
					{
						value: 'MPV',
						label: 'MPV'
					},
					{
						value: '敞篷车',
						label: '敞篷车'
					},
					{
						value: '旅行车',
						label: '旅行车'
					},
					{
						value: '皮卡',
						label: '皮卡'
					},
					{
						value: '客车',
						label: '客车'
					},
					{
						value: '货车',
						label: '货车'
					}
				],
				qudongList: [{
						value: '前驱',
						label: '前驱'
					},
					{
						value: '后驱',
						label: '后驱'
					},
					{
						value: '四驱',
						label: '四驱'
					}
				],
				ranyouList: [{
						value: '汽油',
						label: '汽油'
					},
					{
						value: '柴油',
						label: '柴油'
					},
					{
						value: '电动',
						label: '电动'
					},
					{
						value: '油电混合',
						label: '油电混合'
					},
					{
						value: '其它',
						label: '其它'
					}
				]


			};
		},
		methods: {
			//图片上传时文件格式错误方法
			handleFormatError(file) {
			  this.$Notice.warning({
			    title: '文件格式不正确',
			    desc:
			      '文件 ' +
			      file.name +
			      ' 格式不正确，请上传 jpg 或 png 或 jpeg格式的图片。',
			  })
			},
			//校验图片的大小，不能大于2M
			handleMaxSize: function(file) {
			  this.$Modal.info({
			    title: '超出文件大小限制',
			    content: '文件 ' + file.name + ' 太大，不能超过 2M。',
			  })
			},
			handleRemove(file) {
			  // 从 upload 实例删除数据 
			  this.$data.car.imgUrl = ''
			},
			//上传成功后的勾子 
			handleSuccess: function(response, file, fileList) {
				
			  this.$data.car.imgUrl = response.DATA.URL
			  console.log( this.$data.car.imgUrl)
			},
			
			handleListRemove(file) {
			  // 从 upload 实例删除数据 
			  this.$data.imgUrlList = []
			},
			//上传成功后的勾子 
			handleListSuccess: function(response, file, fileList) {
				this.$data.imgs = response.DATA.URL
			  var img = {}
			  img.carId = this.$data.car.carId
			  img.imgUrl = this.$data.imgs
			  console.log(img)
			  this.$data.imgUrlList.unshift(img)
			  
			  // this.$data.imgUrlList.carId = this.$data.car.carId
			  // this.$data.imgUrlList.imgUrl = response.DATA.URL
			  console.log( this.$data.imgUrlList)
			},
			submit() {
				console.log(this.car.productionDate);
				if (this.$data.car.name.length === 0) {
					this.message.error("车名必须输入");
					return;
				}

				if (this.$data.car.carCondition === 0) {
					this.message.error("车龄必须输入");
					return;
				}

				if (this.$data.car.mileage === null && this.$data.car.mileage ==='') {
					// this.message.error("车辆表显里程必须输入");
					if(String(this.$data.car.mileage).trim()===''|| Number(this.$data.car.mileage) <= 0){
						this.message.error("请输入正确的车辆里程");
						return;
					} else if (String(this.$data.car.mileage).indexOf('.') !== -1 || String(this.$data.car.mileage).indexOf('-')){
						this.message.error("请输入正确的车辆里程");
						return;
					}
					return;
				}

				if (this.$data.car.brandId === 0) {
					this.message.error("车辆品牌必须输入");
					return;
				}
				let self = this;

				this.http.post({
					url: "/car/info",
					param: this.$data.car
				}).then(data => {
					self.message.info("新增成功");
					this.cancel();
				});
			},
			cancel: function() {
				this.$tabs.close();
				this.$router.push({
					name: "car",
					params: {}
				});
			},
			getBrand() {
				this.http.get({
					url: "/brand/list",
					param: {}
				}).then(data => {
					this.$data.brand = data
				});
			}
		},
		created() {
			this.iport = this.store.state.iport
			this.url = this.iport + 'image/upload'
			this.getBrand();
		}


	}
</script>

<style scoped="scoped">
	div {
		float: left;
	}
</style>
